<template>
	<div id="city">
		<!--  -->
		<mt-index-list>
			<mt-index-section v-for="(ns,attr) in city" :index="attr">
				<mt-cell v-for="item in ns" :title="item.name" ></mt-cell>
			</mt-index-section>
		</mt-index-list>
	</div>
	
	
</template>

<script>
	import axios from "axios";
	
	export default{
		created(){
			var self = this;
			//请求
			axios.get("https://m.maizuo.com/v4/api/city").then(function(res){
				console.log(res.data.data.cities)
//				self.city = res.data.data.cities;
				/**
				 * {
				 * 	a:[],
				 * 	b:[],
				 * }
				 */
				var obj = {};
				var city = res.data.data.cities;
				city.forEach(function(item,index){
					var p = item.pinyin[0];
//					debugger;
					//对象["属性的字符串"]同样可以访问对象的这个属性
					//既然是可以传字符串，那么就可以动态的访问对象上的属性是否存在
					if( obj[p]==undefined ){
						//判断如果obj里面没有首字母的分类，那么就要给他一个空数组
						obj[p] = [];
					}
					//给对应的属性（分类）,添加城市
					obj[p].push(item);
				})
				
				var newArr = [];
				//排序后的数组
				newArr = Object.keys(obj).sort();
				console.log(newArr)
				var newObj = {};
				for( var i = 0;i<newArr.length;i++ ){
					//给新对象按照顺序添加属性，并且用已经分好组的旧对象上获取值
					//对象上的数据更新会让数据的排序打乱，所以要按顺序添加
					//newArr[0] == "A"
					//newArr[1] == "B"
					newObj[ newArr[i] ] = obj[ newArr[i] ] ;
				}
				
				console.log(newObj);
				//把排序之后的值给city
				self.city = newObj;
			})
		},
		data(){
			return {
				city:{}
			}
		},
		
		
		
	}
	
	
</script>

<style>
	#city{
		position: absolute;
		top: 50px;
		bottom:0;
		left: 0;
		right: 0;
		overflow-y: scroll;
		text-align: left;
	}
</style>